<template>
  <div class="bar-page">
    <el-col :xs="12" :sm="6" :md="4" :lg="3" :xl="1">
      <div id="bar" ref="bar" :style="containerStyle"></div>
    </el-col>
    <!-- <el-col :xs="12" :sm="6" :md="4" :lg="3" :xl="1">
    </el-col> -->
  </div>
</template>

<script>
import { Bar } from "@/libs/echarts";

export default {
  name: "Bar",
  data() {
    return {
      options: {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      },
      containerStyle: {
        width: "750px",
        height: "750px",
      },
    };
  },
  computed: {
    currentRefrence() {
      const { bar } = this.$refs;
      return bar || null;
    },
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      if (this.currentRefrence) {
        new Bar(this.options, this.currentRefrence);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.bar-page {
  height: 100%;
  width: 100%;
}
</style>
